// import type { PropsWithChildren } from "react";
import type { CommonComponentProps } from "../../interface";
import { useDrop } from "react-dnd";
// import { message } from "antd";
import { useComponentsStore } from '../../store/components'
import { useComponentConfigStore } from "../../store/component-config";


function Container({ id, name, children }: CommonComponentProps) {

    // const messageApi = message.useMessage();
    const { addComponent } = useComponentsStore();
    const { componentConfig } = useComponentConfigStore();

    const [{ canDrop }, dropRef] = useDrop(() => (
        {
            accept: ['Button', 'Container', 'Page'],
            // 被拖动的内容进入到目标元素时触发
            drop(item: { type: string }) {
                // console.log(item);
                const props = componentConfig[item.type].defaultProps;
                // messageApi.success(item.type);
                addComponent({
                    id: new Date().getTime(),
                    name: item.type,
                    prosp: props,
                }, id)

            }
        }
    ))

    return (
        <div className={`min-h-[100px] p-[20px] ${canDrop ? 'border-[2px] border-[blue]' : 'min-h-[100px] p-[20px]'}`} ref={dropRef}>
            {children}
        </div>
    )
}
export default Container;